// JSX - 条件渲染
// 语法: { 三元表达式 }

// 稍复杂的条件渲染

// 需求: flag1  1 -> 男  0 -> 女  2 -> 未知
// 解决办法: 抽象一个函数 在函数中做判断 return结果 模板中执行这个函数得到渲染结果

const getName = (type) => {
  const MAP = {
    1: '男',
    0: '女',
    2: '未知性别'
  }
  return MAP[type]
}

const flag = false
function App () {
  return (
    <div className="App">
      {/* 控制span元素的显示和隐藏 */}
      {flag ? <span>this is span</span> : null}
      {getName(0)}
      {getName(1)}
      {getName(2)}
    </div>
  )
}

export default App
